<template>
  <div class="navTab" :style="{ width: !$store.state.isCollapse ? '250px' : '64px' }">
    <el-menu :collapse="$store.state.isCollapse" class="menuTab" :class="{ menuTabWidth: !$store.state.isCollapse }" :default-active="$route.path">
      <!-- router -->
      <div class="systemTitle" :style="{ width: !$store.state.isCollapse ? '250px' : '64px' }">
        <img src="@/assets/image/logo.png" alt="" />
        <div class="text" v-if="!$store.state.isCollapse">昌东镇云上监督平台</div>
      </div>
      <div class="systemTab scrollbar">
        <div class="systemItem" :style="{ width: !$store.state.isCollapse ? '250px' : '64px' }">
          <template v-for="(item, index) in tabPathLsit" :key="index">
            <el-sub-menu :index="item.path" v-if="!item.meta.isShowMenu && item.children">
              <template #title>
                <component class="mg10" :is="item.icon" size="20" :fill="item.meta.iconColor ? item.meta.iconColor : '#35353F'"></component>
                <i>{{ item.menuName }}</i>
              </template>

              <template v-for="(it, ind) in item.children" :key="ind">
                <el-menu-item :index="it.path" v-if="!it.meta.isShowMenu" @click="gotoPageName(it, ind, 2)">
                  {{ it.menuName }}
                </el-menu-item>
              </template>
            </el-sub-menu>
            <el-menu-item v-if="!item.meta.isShowMenu && !item.children" :index="item.path" @click="gotoPageName(item, index, 3)">
              <component class="mg10" :is="item.icon" size="20" :fill="item.meta.iconColor ? item.meta.iconColor : '#35353F'"></component>
              <p>{{ item.menuName }}</p>
            </el-menu-item>
          </template>
        </div>
      </div>
    </el-menu>
  </div>
</template>
<script>
export default {
  watch: {
    $route() {
      this.setAddTags()
    },
  },
  data() {
    return {
      tabPathLsit: [],
    }
  },
  mounted() {
    // 首次进入添加默认导航tab
    if (!(sessionStorage.getItem('visitedTags')?.length < 0)) {
      this.setAddTags()
    }
    this.$router.options.routes.some((item, index) => {
      if (item.name == 'index') {
        this.tabPathLsit = this.$router.options.routes[index].children
        return true
      }
    })
  },
  methods: {
    setAddTags() {
      const route = this.$route //获取地址栏路由
      this.$store.commit({
        type: 'setAddTags',
        route,
      })
    },

    isActive(route) {
      return route.path === this.$route.path
    }, //当前地址栏路径是否与渲染的路径相同 样式匹配

    gotoPageName(item, index, aa) {
      let path = ''
      if (item.meta.path2 && item.meta.path2 != null) {
        path = item.meta.path2
      } else {
        path = item.path
      }
      this.$router.push({
        path: item.path,
        query: this.urlToJson(path),
      })
    },
  },
}
</script>

<style lang="scss" scoped>
.mg10 {
  margin-right: 8px;
}
.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 200px;
}
.navTab {
  transition: all 0.4s ease 0s;
  height: 100vh;
}
.menuTab {
  display: flex;
  flex-direction: column;
  // transition: all 0.4s ease 0s;
  // box-shadow: 2px 0 6px rgba(0, 21, 41, 0.05);

  .systemTitle {
    font-size: 16px;
    font-weight: 600;
    color: #333;
    height: 60px;
    width: 100%;
    justify-content: flex-start;
    // background-color: #ddedff;
    display: flex;
    align-items: center;
    padding: 0 14px 0 12px;
    img {
      width: 34px;
      height: 34px;
      border-radius: 5px;
    }
    .text {
      white-space: nowrap;
      overflow: hidden;
      color: #2c83e4;
      font-size: 16px;
      margin-left: 12px;
      // text-overflow: ellipsis;
      width: 170px;
    }
    img {
      width: 40px;
      height: 40px;
    }
  }
  .systemTab {
    overflow-y: auto;
    overflow-x: hidden;
    height: calc(100vh - 60px);
    transition: all 0.4s ease 0s;
    padding-bottom: 55px;
    .systemItem {
      width: 246px;
      transition: all 0.4s ease 0s;
    }
    &:hover {
      overflow-y: auto;
    }
  }
}
</style>

